<template>
  <div style="padding: 10px;">
    <el-row >
      <el-col>
        <div style="display: flex;">
          <div>
            <el-form :model="list_params" ref="searchForm"  size="small" :inline="true" @submit.native.prevent="() => handleQuery()">
              <el-form-item label="" label-width="80px" prop="supplyKeyword">
                <el-input v-model="list_params.supplyKeyword" placeholder="搜索货主名称/供货单/合同号" ></el-input>
              </el-form-item>
<!--              <el-form-item label="" prop="supplyBrandId">-->
<!--                <el-select filterable  v-model="list_params.supplyBrandId" placeholder="请选择品牌" clearable :style="{width: '100%'}">-->
<!--                  <el-option label="全部品牌" value=""></el-option>-->
<!--                  <el-option v-for="item in brand_list" :label="item.name" :value="item.id" :key="item.id" ></el-option>-->
<!--                </el-select>-->
<!--              </el-form-item>-->
              <el-form-item label="" prop="supplyStatus">
                <el-select filterable  v-model="list_params.supplyStatus" placeholder="请选择状态" clearable :style="{width: '100%'}">
                  <el-option label="全部状态" value=""></el-option>
                  <el-option v-for="item in dict.type.supply_list_status"  :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"  size="mini" native-type="submit">搜索</el-button>
                <el-button  size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="flex: 1;"></div>
          <div>
<!--            <el-button>删除</el-button>-->
<!--            <el-button @click="handleEnable(0)" >禁用</el-button>-->
<!--            <el-button @click="handleEnable(1)" >启用</el-button>-->
            <!-- <el-button @click="handleExport">导出</el-button>
            <el-button>导入</el-button> -->
            <el-button type="primary" @click="addInfo" >新增</el-button>
          </div>
        </div>
      </el-col>
      <el-col>
        <div style="margin-top: 10px;">
          <el-table :data="list_data" @selection-change="handleSelectionChange"  :height="table_height" style="width: 100%;" >
            <el-table-column type="selection" width="50" align="center"  />
            <el-table-column label="合同号" prop="cargoOwnerName" width="180">
              <template slot-scope="scope" >
                {{scope.row.supplyList.contractNumber}}
              </template>
            </el-table-column>
            <el-table-column label="货柜号" prop="cargoOwnerName" width="180">
              <template slot-scope="scope" >
                {{scope.row.supplyList.containerNumber}}
              </template>
            </el-table-column>
            <el-table-column label="货主" prop="cargoOwnerName" width="180">
              <template slot-scope="scope" >
                {{scope.row.supplyList.cargoOwnerName}}
              </template>
            </el-table-column>
            <el-table-column label="供货商品" prop="cargoOwnerName" width="180">
              <template slot-scope="scope" >
                {{scope.row.supplyList.productNames}}
              </template>
            </el-table-column>
            <el-table-column label="国外代理" prop="agentName" width="180"></el-table-column>>
            <el-table-column label="预计开船" prop="estimatedDepartTime" width="180"></el-table-column>
            <el-table-column label="预计到港" prop="estimatedArrivalTime" width="180"></el-table-column>
            <el-table-column label="目的港" prop="aimPortName" width="180"></el-table-column>
            <el-table-column label="海运费报价" prop="oceanFreightQuotationForeignCurrency" width="180"></el-table-column>
            <el-table-column label="单证费报价" prop="docFeeQuotationForeignCurrency" width="180"></el-table-column>
            <el-table-column label="操作" prop="op" width="180" fixed="right">
              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  @click="showInfo(scope.row)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="list_total>0"
            :total="list_total"
            :page.sync="list_params.pageNum"
            :limit.sync="list_params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
    <el-drawer
      :title="formData.id?'编辑海运清单':'新增海运清单'"
      size="80%"
      :visible.sync="dialog_show">
      <el-form :model="formData" ref="form" :rules="formDataRules"  size="small" label-width="100px" >
      <div>
        <div class="section">
          <el-row>
            <el-col :span="6">
              <el-form-item label="供货单" prop="supplyListId">
                <el-select filterable  v-model="formData.supplyListId" filterable style="width: 100%;" @change="onSupplyOrderChange">
                  <el-option v-for="item in supply_order_list" :key="item.id" :value="item.id" :label="item.contractNumber +' - '+item.containerNumber +' - '+item.cargoOwnerName" ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实际到港" prop="actualArrivalTime">
                <el-date-picker v-model="formData.actualArrivalTime" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供货单状态" prop="cargoOwnerName">
                <div v-if="!supply_order_info.id">-</div>
                <div v-else ><dict-tag :options="dict.type.supply_list_status" :value="supply_order_info.supplyListStatus"/></div>
              </el-form-item>
            </el-col>
            <el-col>
              <div>供货单信息</div>
            </el-col>
            <el-col>
              <div style="padding-top: 12px;">
                <el-table :data="[supply_order_info]">
                  <el-table-column label="合同号" prop="contractNumber" ></el-table-column>
                  <el-table-column label="货柜号" prop="containerNumber" ></el-table-column>
                  <el-table-column label="货主" prop="cargoOwnerName" ></el-table-column>
                  <el-table-column label="供货产品" prop="productNames" ></el-table-column>
                  <el-table-column label="总数量" prop="totalQty" ></el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <el-row>
            <el-col :span="6">
              <el-form-item label="预计开船" prop="estimatedDepartTime">
                <el-date-picker v-model="formData.estimatedDepartTime" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计到港" prop="estimatedArrivalTime">
                <el-date-picker v-model="formData.estimatedArrivalTime" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="目的港" prop="aimPortId">
                <el-select filterable  v-model="formData.aimPortId" style="width: 100%;">
                  <el-option v-for="owner in port_list" :key="owner.id" :label="owner.name" :value="owner.id"  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
<!--              <el-form-item label="派车公司" prop="cargoOwnerName1">-->
<!--                <el-select filterable  style="width: 100%;"></el-select>-->
<!--              </el-form-item>-->
            </el-col>
            <el-col :span="6">
              <el-form-item label="国外代理" prop="agentId">
                <el-select filterable  v-model="formData.agentId" style="width: 100%;">
                  <el-option v-for="item in agent_list" :key="item.id" :label="item.name" :value="item.id" ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="船东" prop="shipowner">
                <el-input v-model="formData.shipowner"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="船名" prop="shipName">
                <el-input v-model="formData.shipName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="提单号" prop="ladingNumber">
                <el-input v-model="formData.ladingNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实际开船" prop="actualDepartTime">
                <el-date-picker v-model="formData.actualDepartTime" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="到港口" prop="arrivalPortId">
                <el-select filterable  v-model="formData.arrivalPortId" style="width: 100%;">
                  <el-option v-for="owner in port_list" :key="owner.id" :label="owner.name" :value="owner.id"  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="海运费付款日期" prop="paymentDate">
                <el-date-picker v-model="formData.paymentDate" value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <el-row>
            <el-col :span="6">
              <el-form-item label="海运费报价单位" prop="quotationCurrency">
                <el-select filterable  v-model="formData.quotationCurrency" style="width: 100%;" @change="onQuotationCurrencyChange">
                  <el-option v-for="dict in dict.type.currency" :key="dict.value" :label="dict.label"
                             :value="dict.value"  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报价外币汇率" prop="oceanFreightQuotationExchangeRate">
                <el-input v-model="formData.oceanFreightQuotationExchangeRate" type="number" @change="onOceanFreightQuotationExchangeRateChange"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="海运费报价(外币)" prop="oceanFreightQuotationForeignCurrency">
                <el-input v-model="formData.oceanFreightQuotationForeignCurrency" type="number" @change="onOceanFreightQuotationForeignCurrencyChange"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="海运费报价(元)" prop="oceanFreightQuotationRmb">
                <el-input v-model="formData.oceanFreightQuotationRmb" type="number"  ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="is_owner != 1">
              <el-form-item label="海运费成本单位" prop="oceanFreightCostCurrency">
                <el-select filterable  v-model="formData.oceanFreightCostCurrency" style="width: 100%;">
                  <el-option v-for="dict in dict.type.currency" :key="dict.value" :label="dict.label"
                             :value="dict.value"  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="is_owner != 1">
              <el-form-item label="成本外币汇率" prop="oceanFreightCostExchangeRate">
                <el-input v-model="formData.oceanFreightCostExchangeRate" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="is_owner != 1">
              <el-form-item label="海运费成本(外币)" prop="oceanFreightCostForeignCurrency">
                <el-input v-model="formData.oceanFreightCostForeignCurrency" type="number" @change="onOoceanFreightCostForeignCurrencyChange" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="is_owner != 1">
              <el-form-item label="海运费成本(元)" prop="oceanFreightCostRmb">
                <el-input v-model="formData.oceanFreightCostRmb" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单证费报价单位" prop="docFeeQuotationUnit">
                <el-select filterable  v-model="formData.docFeeQuotationUnit" style="width: 100%;">
                  <el-option v-for="dict in dict.type.currency" :key="dict.value" :label="dict.label"
                             :value="dict.value"  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单证费报价汇率" prop="docFeeQuotationExchangeRate">
                <el-input v-model="formData.docFeeQuotationExchangeRate" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单证费报价(外币)" prop="docFeeQuotationForeignCurrency">
                <el-input v-model="formData.docFeeQuotationForeignCurrency" type="number" @change="onDocFeeQuotationForeignCurrencyChange"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="单证费报价(元)" prop="docFeeQuotationRmb">
                <el-input v-model="formData.docFeeQuotationRmb" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="is_owner != 1">
              <el-form-item label="单证费实付单位" prop="docFeeActPaidUnit">
                <el-select filterable  v-model="formData.docFeeActPaidUnit" style="width: 100%;">
                  <el-option v-for="dict in dict.type.currency" :key="dict.value" :label="dict.label"
                             :value="dict.value"  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="is_owner != 1">
              <el-form-item label="单证费实付汇率" prop="docFeeActPaidExchangeRate">
                <el-input v-model="formData.docFeeActPaidExchangeRate" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="is_owner != 1">
              <el-form-item label="单证费实付(外币)" prop="docFeeActPaidForeignCurrency">
                <el-input v-model="formData.docFeeActPaidForeignCurrency" type="number" @change="onDocFeeActPaidFroeignCurrencyChange"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="is_owner != 1">
              <el-form-item label="单证费实付(元)" prop="docFeeActPaidRmb">
                <el-input v-model="formData.docFeeActPaidRmb" type="number" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <div style="padding-bottom: 6px;">其他费用</div>
          <div>
            <el-table :data="fees" style="width: 100%" >
              <el-table-column prop="date" label="序号">
                <template slot-scope="scope" >
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="date" label="科目">
                <template slot-scope="scope" >
                  <el-select filterable  v-model="fees[scope.$index].financeSubjectId" filterable>
                    <el-option v-for="fee in subject_fees" :key="fee.id" :label="fee.name" :value="fee.id" ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="金额">
                <template slot-scope="scope" >
                  <el-input v-model="fees[scope.$index].amt" type="number" ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="备注">
                <template slot-scope="scope" >
                  <el-input v-model="fees[scope.$index].remark"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="操作">
                <template slot-scope="scope" >
                  <el-button
                    v-if="scope.$index != 0"
                    size="mini"
                    type="text"
                    @click="delFee(scope.$index)"
                  >删除</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="addFee(scope.row)"
                  >新增</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="section">
          <el-row>
            <el-col :span="12">
              <div>
                <div style="padding-bottom: 12px;">图片附件</div>
                <div>

                  <el-form-item prop="pictures" label-width="0px" >
                    <el-upload ref="field101" :file-list="pictures" :action="uploadImgUrl" limit="10" multiple
                               :headers="headers" :on-success="field101Success" :on-remove="field101Remove"
                               :before-upload="field101BeforeUpload" list-type="picture-card" accept="image/*">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <div style="padding-bottom: 12px;">文件附件</div>
                <div>

                  <el-form-item prop="pictures" label-width="0px" >
                    <el-upload ref="field102" :file-list="files" :action="uploadImgUrl" limit="10" multiple
                               :headers="headers" :on-success="field102Success" :on-remove="field102Remove"
                               :before-upload="field101BeforeUpload"  >
                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>

        </div>
        <div class="section" style="display: flex;justify-content: flex-end;position: sticky;bottom: 0px;">
          <el-button type="primary" @click="submitData">提交</el-button>
        </div>
      </div>
      </el-form>
    </el-drawer>
    <el-drawer
      title="海运清单详情"
      size="80%"
      :visible.sync="edit_dialog_show">
      <div>
        <div class="section">
          <el-row>
            <el-col :span="4">
              <div>
                <div class="section-item-title">供货单</div>
                <div>{{ supply_order_info.contractNumber }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <div class="section-item-title">实际到港</div>
                <div>{{ info.actualArrivalTime }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <div class="section-item-title">状态</div>
                <div  ><dict-tag :options="dict.type.supply_list_status" :value="supply_order_info.supplyListStatus"/></div>
              </div>
            </el-col>
            <el-col>
              <div style="padding-top: 20px;">供货单信息</div>
            </el-col>
            <el-col>
              <div style="padding-top: 12px;">
                <el-table :data="[supply_order_info]">
                  <el-table-column label="合同号" prop="contractNumber" ></el-table-column>
                  <el-table-column label="货柜号" prop="containerNumber" ></el-table-column>
                  <el-table-column label="货主" prop="cargoOwnerName" ></el-table-column>
                  <el-table-column label="供货产品" prop="productNames" ></el-table-column>
                  <el-table-column label="总数量" prop="totalQty" ></el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <el-row :gutter="20">
            <el-col :span="4" class="section-item">
              <div class="section-item-title">预计开船</div>
              <div>{{info.estimatedDepartTime}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">预计到港</div>
              <div>{{info.estimatedArrivalTime}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">目的港</div>
              <div>{{info.aimPortName}}</div>
            </el-col>
<!--            <el-col :span="4" class="section-item">-->
<!--              <div class="section-item-title">派车公司</div>-->
<!--              <div>某某派车公司</div>-->
<!--            </el-col>-->
            <el-col :span="4" class="section-item">
              <div class="section-item-title">国外代理</div>
              <div>{{info.agentName}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">船东</div>
              <div>{{info.shipowner}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">船名</div>
              <div>{{ info.shipName }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">提单号</div>
              <div>{{info.ladingNumber}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">实际开船</div>
              <div>{{ info.actualDepartTime }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">到港口</div>
              <div>{{info.arrivalPortName}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">海运费付款日期</div>
              <div>{{info.paymentDate}}</div>
            </el-col>
          </el-row>
        </div>
          <div class="section">
            <el-row>
              <el-col :span="6" class="section-item">
                <div>
                  <div class="section-item-title">海运费报价单位</div>
                  <div> <dict-tag  :options="dict.type.currency" :value="info.quotationCurrency"></dict-tag></div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item">
                <div>
                  <div class="section-item-title">报价外币汇率</div>
                  <div>{{ info.oceanFreightQuotationExchangeRate }}</div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item">
                <div>
                  <div class="section-item-title">海运费报价(外币)</div>
                  <div>{{ info.oceanFreightQuotationForeignCurrency }}</div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item">
                <div>
                  <div class="section-item-title">海运费报价(元)</div>
                  <div>{{ info.oceanFreightQuotationRmb }}</div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item" v-if="is_owner != 1">
                <div>
                  <div class="section-item-title" >海运费成本单位</div>
                  <div> <dict-tag  :options="dict.type.currency" :value="info.oceanFreightCostCurrency"></dict-tag></div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item" v-if="is_owner != 1">
                <div>
                  <div class="section-item-title">成本外币汇率</div>
                  <div>{{ info.oceanFreightCostExchangeRate }}</div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item bg-green" v-if="is_owner != 1">
                <div>
                  <div class="section-item-title">海运费成本(外币)</div>
                  <div>{{ info.oceanFreightCostForeignCurrency }}</div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item bg-green" v-if="is_owner != 1">
                <div>
                  <div class="section-item-title">海运费成本(元)</div>
                  <div>{{ info.oceanFreightCostRmb }}</div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item">
                <div>
                  <div class="section-item-title">单证费报价单位</div>
                  <div> <dict-tag  :options="dict.type.currency" :value="info.docFeeQuotationUnit"></dict-tag></div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item">
                <div>
                  <div class="section-item-title">单证费报价汇率</div>
                  <div>{{ info.docFeeQuotationExchangeRate }}</div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item">
                <div>
                  <div class="section-item-title">单证费报价(外币)</div>
                  <div>{{ info.docFeeQuotationForeignCurrency }}</div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item">
                <div>
                  <div class="section-item-title">单证费报价(元)</div>
                  <div>{{ info.docFeeQuotationRmb }}</div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item" v-if="is_owner != 1">
                <div>
                  <div class="section-item-title">单证费实付单位</div>
                  <div> <dict-tag  :options="dict.type.currency" :value="info.docFeeActPaidUnit"></dict-tag></div>
                </div>
              </el-col>
              <el-col :span="6" class="section-item" v-if="is_owner != 1">
                <div class="section-item-title">单证费实付汇率</div>
                <div>{{info.docFeeActPaidExchangeRate}}</div>
              </el-col>
              <el-col :span="6" class="section-item bg-green" v-if="is_owner != 1">
                <div class="section-item-title">单证费实付(外币)</div>
                <div>{{ info.docFeeActPaidForeignCurrency }}</div>
              </el-col>
              <el-col :span="6" class="section-item bg-green" v-if="is_owner != 1">
                <div class="section-item-title">单证费实付(元)</div>
                <div>{{ info.docFeeActPaidRmb }}</div>
              </el-col>
            </el-row>
          </div>
        <div class="section">

          <div style="padding-bottom: 6px;">其他费用</div>
          <div>
            <el-table :data="fees" style="width: 100%" >
              <el-table-column prop="date" label="序号">
                <template slot-scope="scope" >
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column prop="financeSubjectName" label="科目"></el-table-column>
              <el-table-column prop="amt" label="金额"></el-table-column>
              <el-table-column prop="remark" label="备注">
                <template slot-scope="scope" >
                  {{ scope.row.remark ==  '' ? '-' : scope.row.remark }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="section">
          <el-row>
            <el-col :span="12">
              <div>图片附件</div>
              <div>
                <el-row :gutter="10">
                  <el-col v-for="item in imgs" :span="4" >
                    <el-image
                      style="width: 100%; height: 100px;"
                      :src="item.url"
                    >        </el-image>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <div>文件附件</div>
              <div>
                <div v-for="item in docs" style="background: #F3F4F6;padding: 16px;border-radius: 16px;margin: 10px 0px;display: flex;">
                  <div style="flex: 1;">
                    {{item.name}}
                  </div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)" ><i class="el-icon-view"></i></div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)"  ><i class="el-icon-download"></i></div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="section" style="display: flex;justify-content: flex-end;position: sticky;width: 100%;bottom: 0px;margin: 0px;">
          <el-button type="primary" @click="editInfo">编辑</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { list,add,detail,update } from '@/api/logistics/sea'
import {list as subjectList} from '@/api/base/subject'
import { list as supplyOrderList, detail as supplyOrderDetail } from '@/api/supply/order'
import {list as portList} from "@/api/base/port";
import {list as agentList } from "@/api/base/agent";
import { list as feeList } from "@/api/fee/fee";
import {list as brandList} from  "@/api/product/brand"
import { getToken } from "@/utils/auth";
import { getUploadFiles,getUploadFileUrls } from '@/api/common'
import {mapGetters} from "vuex";
export default {
  name: 'sea_transportation',
  computed: {
    ...mapGetters([
      'roles'
    ]),
  },
  dicts:['supply_list_status','currency'],
  data() {
    return {
      is_owner:0,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      pictures:[],
      files:[],
      table_height:window.innerHeight - 300,
      supply_order_list:[],
      list_params: {
        pageNum: 1,
        pageSize: 10,
        supplyBrandId: '',
        supplyStatus: '',
        supplyKeyword: '',
      },
      list_total:0,
      list_data:[],
      info:{},
      dialog_show : false,
      edit_dialog_show : false,
      fees:[{ financeSubjectId:'' }],
      subject_fees:[],
      formData:{
      },
      formDataRules:{
        supplyListId:[{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        estimatedDepartTime:[{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        estimatedArrivalTime:[{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        aimPortId:[{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        agentId:[{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
      },
      port_list:[],
      supply_order_info:{},
      agent_list:[],
      brand_list:[],
    }
  },
  created() {
    this.getSubjectList()
    this.getList()
    // this.getSupplyOrderList()
    this.getPortList()
    this.getAgentList()
    this.getBrandList()
    this.is_owner = (this.roles.indexOf('cargo_owner') != -1)?1:0;

  },
  methods: {
    resetQuery(){
      this.$refs.searchForm.resetFields();
      this.getList()
    },
    getBrandList(){
      brandList({is_page:0}).then(res => {
        this.brand_list = res.rows;
      })
    },
    getAgentList(){
      agentList({is_page:0}).then(res => {
        this.agent_list = res.rows;
      })
    },
    getPortList(){
      portList({is_page:0,category:1}).then(res => {
        this.port_list = res.rows;
      })
    },
    getSupplyOrderList(entity = undefined){
      supplyOrderList({materialFlowType:1,supplyListStatus:2,is_page:0}).then(res => {
        let supply_order_list = res.rows;
        if (entity!=undefined){
          supply_order_list.push(entity)
        }
        this.supply_order_list = supply_order_list;
      })
    },
    getList() {
      list(this.list_params).then(res => {
        this.list_data = res.rows;
        this.list_total = res.total
      })
    },
    getSubjectList(){
      subjectList({is_page:0}).then(res => {
        console.log(res)
        this.subject_fees =  res.rows;
      })
    },
    handleQuery() {
      console.log('查询')
      this.getList()
    },
    showInfo(info){
      this.info = {}
      this.supply_order_info = {}
      this.fees = []
      detail(info.id).then(res=>{
        this.info = res.data
        supplyOrderDetail(res.data.supplyListId).then(res1 => {
          this.supply_order_info = {
            ...res1.data
          }
        })
        feeList({supplyListId:res.data.supplyListId,bizType:1,is_page:0}).then(res2 => {
          this.fees = res2.rows;
        })

        let imgs = res.data.imgFiles;
        let docs = res.data.docFiles;
        console.log(imgs)
        if (imgs != ''){
          getUploadFiles(imgs).then((img_res)=>{
            this.imgs = getUploadFileUrls(img_res.data);
            this.pictures = this.imgs;
          })
        }
        if (docs != ''){
          getUploadFiles(docs).then((img_res)=>{
            this.docs = getUploadFileUrls(img_res.data);
            this.files = this.docs;
          })
        }
      })
      this.edit_dialog_show = true
    },
    editInfo(){
      this.edit_dialog_show = false
      this.dialog_show = true
      this.fees = this.fees.length == 0?[{}]:this.fees
      let supply_order= {contractNumber:this.info.supplyList.contractNumber,id:parseInt(this.info.supplyListId)}
      this.getSupplyOrderList(supply_order)
      this.formData = {
        ...this.info,
        oceanFreightCostCurrency:this.info.oceanFreightCostCurrency+'',
        quotationCurrency:this.info.quotationCurrency+'',
        docFeeActPaidUnit:this.info.docFeeActPaidUnit+'',
        docFeeQuotationUnit:this.info.docFeeQuotationUnit+'',
        supplyListId:parseInt(this.info.supplyListId)
      }
    },
    addInfo(){
      this.supply_order_info = {}
      this.formData = {}
      this.fees = [{}]
      this.dialog_show = true
      this.getSupplyOrderList()
    },
    onSupplyOrderChange(){
      supplyOrderDetail(this.formData.supplyListId).then(res => {
        this.supply_order_info = {
          ...res.data
        }
        let formData = this.formData;
        formData.estimatedDepartTime = res.data.estimatedShipmentTime
        formData.estimatedArrivalTime = res.data.estimatedArrivalTime
        formData.aimPortId = res.data.destinationPortId
        this.formData = formData
      })
    },
    submitData(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // this.handleConfirm()
          let xnfFeeList = [];
          this.fees.forEach(item => {
            if(item.financeSubjectId&&item.amt){
              xnfFeeList.push({
                financeSubjectId: item.financeSubjectId,
                amt: item.amt,
                remark: item.remark,
                supplyListId:this.supply_order_info.id,
                bizType:1
              })
            }
          })
          this.formData = {
            ...this.formData,
            xnfFeeList: xnfFeeList
          }
          if (this.formData.id){

            update(this.formData).then(res => {
              this.$message.success('编辑成功')
              this.dialog_show = false
              this.getList()
            })
          }else{

            add(this.formData).then(res => {
              this.$message.success('添加成功')
              this.dialog_show = false
              this.getList()
            })
          }
        } else {
          return false;
        }
      });
    },

    delFee(row){
      this.fees.splice(row,1)
    },
    addFee(row){
      this.fees.push({ remark:'' })
    },
    onQuotationCurrencyChange(e){
      this.formData = {
        ...this.formData,
        oceanFreightCostCurrency:e,
        docFeeActPaidUnit:e,
        docFeeQuotationUnit:e
      }
    },
    onOceanFreightQuotationExchangeRateChange(e){
      this.formData = {
        ...this.formData,
        docFeeQuotationExchangeRate:e,
        docFeeActPaidExchangeRate:e,
        oceanFreightCostExchangeRate:e
      }
    },
    onOceanFreightQuotationForeignCurrencyChange(e){
      this.formData = {
        ...this.formData,
        oceanFreightQuotationRmb:(e / this.formData.oceanFreightQuotationExchangeRate).toFixed(2),
      }
    },
    onOoceanFreightCostForeignCurrencyChange(e){
      this.formData = {
        ...this.formData,
        oceanFreightCostRmb:(e / this.formData.oceanFreightCostExchangeRate).toFixed(2),
      }
    },
    onDocFeeQuotationForeignCurrencyChange(e){
      this.formData = {
        ...this.formData,
        docFeeQuotationRmb:(e / this.formData.docFeeQuotationExchangeRate).toFixed(2),
      }
    },
    onDocFeeActPaidFroeignCurrencyChange(e){
      this.formData = {
        ...this.formData,
        docFeeActPaidRmb:(e / this.formData.docFeeActPaidExchangeRate).toFixed(2),
      }
    },
    field101BeforeUpload(file) {
      const postfix= file.name.substring(file.name.lastIndexOf('.')+1)
      if(!this.fileSuffix.includes(postfix)){
        this.$message.error('文件类型仅支持'+this.fileSuffix);
        return false
      }
      console.log(postfix)
    },
    field101Success(e){
      console.log('field101Success')
      console.log(e)
      let imgFiles = this.formData.imgFiles?this.formData.imgFiles:'';
      console.log(imgFiles)
      let imgs = imgFiles == ''?[]:imgFiles.split(',');
      imgs.push(e.data.id)
      this.formData = {
        ...this.formData,
        imgFiles:imgs.join(',')
      }
      console.log(this.formData)
    },
    field101Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.formData = {
        ...this.formData,
        imgFiles:ids.join(','),
      }
    },
    field102BeforeUpload(file) {
    },
    field102Success(e){
      console.log(e)
      let docFiles = this.formData.docFiles?this.formData.docFiles:'';
      let docs = docFiles == ''?[]:docFiles.split(',');
      docs.push(e.data.id)
      this.formData = {
        ...this.formData,
        docFiles:docs.join(',')
      }
    },
    field102Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.formData = {
        ...this.formData,
        docFiles:ids.join(','),
      }
    },
    openNav(url){
      window.open(url)
    }
  }
}
</script>

<style scoped>

</style>

<style scoped>
.section{
  background: #fff;
  padding: 24px;
//padding-bottom: 6px;
  margin: 20px;
  border-radius: 8px;
}
.section-item{
  margin: 10px 0px;
  height: 52px;
}
.section-item-title{
  padding-bottom: 10px;
  font-size: 14px;
}
</style>

<style>

.el-drawer__body{
  background: #F3F4F6;
}
.select-custom-icon .el-input__suffix {
  display: none; /* 隐藏默认的下拉箭头 */
}
.select-custom-icon .el-input__suffix::after {
  content: url('../../../assets/icons/more.png'); /* 替换为您的自定义图标路径 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.popper-class{
  display: none;
}
.bg-green{
  background: #13CE66;
}
</style>
